@extends('home.base')
@section('title')
    {{$data->regionname}}{{$data->title}}二手房,买房
@endsection
@section('content')
@include('home.header')
<div id="app">
    <div class="position">
        <div class="w1200">
            <Breadcrumb>
                <breadcrumb-item to="/">首页</breadcrumb-item>
                <breadcrumb-item to="/community/{{$data->region}}">{{$data->regionname}}小区</breadcrumb-item>
                <breadcrumb-item to="/residential/{{$data->id}}">{{$data->title}}</breadcrumb-item>
            </Breadcrumb>
        </div>
    </div>
    <div class="tabs-community-title w1200">
        <Anchor>
            <anchor-link href="/residential/{{$data->id}}#huxing" title="小区详情" ></anchor-link>
            <anchor-link href="/residential/{{$data->id}}#xiangce" title="小区相册" ></anchor-link>
            <anchor-link href="/community/hand/{{$data->id}}" class="ivu-anchor-link-active" title="小区二手房" ></anchor-link>
            <anchor-link href="/community/rental/{{$data->id}}" title="小区租房" ></anchor-link>
            <anchor-link href="/residential/{{$data->id}}#zhoubian" title="周边配套" ></anchor-link>
            <anchor-link href="/residential/{{$data->id}}#fujin" title="附近小区" ></anchor-link>
            <anchor-link href="/residential/{{$data->id}}#jisuan" title="房贷计算" ></anchor-link>
        </Anchor>
    </div>
    <div class="qr-content">
        <div class="w1200">
            <div class="attrs hand">
                <div class="otherlist">
                    <div class="inline">
                        <span class="leftit">总价(万)：</span>
                        <i-input v-model="minPrice" @on-clear="clearPrice" placeholder="0" clearable style="width: 80px"></i-input>
                        <span>-</span>
                        <i-input v-model="maxPrice" @on-clear="clearPrice" placeholder="2000" clearable style="width: 80px"></i-input>
                        <i-button @click="getData">确定</i-button>
                    </div>
                    <div class="inline">
                        <span class="leftit">面积(㎡)：</span>
                        <i-input v-model="minAcreage" @on-clear="clearAcreage" placeholder="30" clearable style="width: 80px"></i-input>
                        <span>-</span>
                        <i-input v-model="maxAcreage" @on-clear="clearAcreage" placeholder="200" clearable style="width: 80px"></i-input>
                        <i-button @click="getData">确定</i-button>
                    </div>
                </div>
                <div class="otherlist">
                    <span class="leftit">户型：</span>
                    <checkbox-group v-model="room" @on-change="getData">
                        <Checkbox label="1">一室</Checkbox>
                        <Checkbox label="2">二室</Checkbox>
                        <Checkbox label="3">三室</Checkbox>
                        <Checkbox label="4">四室</Checkbox>
                        <Checkbox label="5">五室及以上</Checkbox>
                    </checkbox-group>
                </div>
                <div class="otherlist">
                    <span class="leftit">特色：</span>
                    <checkbox-group v-model="tags" @on-change="getData">
                        @foreach($tags as $t)
                        <Checkbox label="{{$t->id}}">{{$t->name}}</Checkbox>
                        @endforeach
                    </checkbox-group>
                </div>
                <div class="otherlist">
                    <span class="leftit">楼层：</span>
                    <checkbox-group v-model="floor" @on-change="getData">
                        <Checkbox label="低层">低层</Checkbox>
                        <Checkbox label="中层">中层</Checkbox>
                        <Checkbox label="高层">高层</Checkbox>
                    </checkbox-group>
                </div>
                <div class="disnone" :class="showClass">
                    <div class="otherlist">
                        <span class="leftit">朝向：</span>
                        <checkbox-group v-model="direction" @on-change="getData">
                            @foreach($direction as $d)
                                <Checkbox label="{{$d->id}}">{{$d->name}}</Checkbox>
                            @endforeach
                        </checkbox-group>
                    </div>
                    <div class="otherlist">
                        <span class="leftit">装修：</span>
                        <checkbox-group v-model="renovation" @on-change="getData">
                            @foreach($renovation as $r)
                                <Checkbox label="{{$r->id}}">{{$r->name}}</Checkbox>
                            @endforeach
                        </checkbox-group>
                    </div>
                    <div class="otherlist">
                        <span class="leftit">房龄：</span>
                        <radio-group v-model="year" @on-change="getData">
                            <Radio label="0,5">5年内</Radio>
                            <Radio label="5,10">5-10年</Radio>
                            <Radio label="10,20">10-20年</Radio>
                            <Radio label="20,200">20年以上</Radio>
                        </radio-group>
                    </div>
                </div>

            </div>
            <div class="hideBtn" :class="showClass">
                <span @click="shorOrHide">@{{ showTxt }}</span>
                <Icon type="md-arrow-dropdown" v-if="showMore"></Icon>
                <Icon type="md-arrow-dropup" v-if="!showMore"></Icon>
            </div>
            <div class="detail-content">
                <div class="left community_left">
                    <div class="sort">
                        <div class="sort-left">
                            <div class="btn" :class="{active:sort==='default'}" id="default" @click="changeSort('default')">默认排序</div>
                            <div class="price btn" :class="{active:sort==='asc' || sort==='desc'}">
                                <span>按价格</span>
                                <Icon type="md-arrow-dropdown" v-if="sort === 'desc'"></Icon>
                                <Icon type="md-arrow-dropup" v-if="sort === 'asc'"></Icon>
                                <div class="dropdown">
                                    <span @click="changeSort('asc')">低到高</span>
                                    <span @click="changeSort('desc')">高到低</span>
                                </div>
                            </div>
                            <div class="btn" :class="{active:sort==='popular'}" @click="changeSort('popular')">
                                人气房源
                                <Icon type="md-arrow-dropdown" v-if="sort === 'popular'"></Icon>
                            </div>
                        </div>
                        <div class="sort-right">
                            共<span>@{{ total }}</span>个房源
                        </div>
                    </div>
                    <div class="vlist hand" v-show="!loading">
                        <div class="con" v-for="item in proData" :key="item.id">
                            <div class="img">
                                <a :href="`/handroom/${item.id}`">
                                    <img :src="item.thumb" alt="">
                                </a>
                                <span>@{{ item.regionname }}</span>
                            </div>
                            <div class="detail" style="width:680px;">
                                <h3>
                                    <a :href="`/handroom/${item.id}`">@{{item.title}}</a>
                                </h3>
                                <div class="hdesc">
                                    <Icon type="ios-home-outline"></Icon>
                                    <span class="tip">@{{item.room}}室@{{ item.hall }}厅</span>
                                    <span class="line">|</span>
                                    <span class="tip">@{{ item.acreage }}平米</span>
                                    <span class="line">|</span>
                                    <span class="tip">@{{ item.renovation_name }}</span>
                                    <span class="line">|</span>
                                    <span class="tip">@{{ item.floor }} / @{{ item.floor_num }}层</span>
                                    <span class="line">|</span>
                                    <span class="tip">@{{ item.direction }}</span>
                                    <span class="line">|</span>
                                    <span class="tip">@{{ item.year }}年建</span>
                                </div>
                                <div class="address hdesc">
                                    <Icon type="ios-pin-outline"></Icon>
                                    <div class="addr nowrap">
                                        <b>@{{ item.communityname }}</b> - @{{ item.address }}
                                    </div>
                                    <a :href="`/property/map?pos=${item.map}&n=${item.title}`" target="_blank" class="map">
                                        <Icon type="md-pin"></Icon>
                                        <span class="txt">查看地图</span>
                                    </a>
                                </div>
                                <div class="hdesc tags">
                                    <span v-for="(itemson,index) in item.attribute" v-if="index<5" :key="itemson.id">@{{ itemson.name }}</span>
                                </div>
                            </div>
                            <div class="average">
                                <div class="price">
                                    <div><span>@{{ item.price }}</span>万</div>
                                    <div style="font-size:12px;">@{{ parseInt(item.average) }}元/平米</div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="loading" v-show="loading">
                        <Spin size="large"></Spin>
                    </div>
                    <div class="empty" v-show="total === 0 && !loading">
                        暂时没有查询到符合条件的楼盘信息
                    </div>
                    <div class="page">
                        <Page :total="total" :page-size="pageSize" :current.sync="current" show-sizer show-total @on-change="getData" @on-page-size-change="handleChangeSize" />
                    </div>
                </div>

            </div>

        </div>
        <input type="hidden" id="community_id" value="{{$data->id}}">
        @include('home.footer')
    </div>
</div>
@endsection

@section('script')
    <style>
        .qr .qr-menu .menu a.menu_7{color:#f90;border-bottom:2px solid #f90}
    </style>
    <script src="/static/home/js/community_hand.js"></script>
@endsection